<template>
<div class="account">
    <div class="tab-nav">
        <span class="active">消息提醒</span>
        <!-- <span>咨询反馈</span> -->
    </div>

    <div class="tab-content">
        <dl>
            <dt>
                <span></span>
                <span>消息内容</span>
                <span>发送时间</span>
                <span>状态</span>
                <span>操作</span>
            </dt>
            <dd v-for="(item , index) in list" :key="index">
                <span>
                    <input type="checkbox" v-model="checkModel" :value="item.id">
                </span>
                <span>{{item.contentMsg}}</span>
                <span>{{parseTime(new Date(item.createTime) , '{y}-{m}-{d}')}}</span>
                <span>{{item.viewStatus ==0 ? '未查看': '已查看'}}</span>
                <span @click="del(item.id, index)" style="cursor: pointer;">删除</span>
            </dd>

            <dd v-if="list.length == 0" class="no-data">
                <span>暂无数据</span>
            </dd>
        </dl>

        <div class="tool" v-if="list.length>0">
            <label for="checkbox">
                <input type="checkbox" @click="checkAll" id="checkbox" v-model="checked">全选
            </label>
            <button @click="haveRead">设为已读</button>
            <button @click="delAll">删除</button>
        </div>

        <el-pagination
            v-if="list.length>0"
            background
            prev-text="上一页" 
            next-text="下一页" 
            layout="prev, pager, next"
            @current-change="curPage"
            :page-size="page.count"
            :total="page.total">
        </el-pagination>
    </div>
</div>
</template>


<script>
import { messagesList, messagesIds, messagesDelAll, messagesDel} from '@/api/me/account'
export default {
    name: "userInfo",
    data() {
        return {
            list:[],
            checked:false, //是否全选
            checkModel:[], //双向数据绑定的数组，我是用的id
            req:{
                messageType: 0,
                limit: 10,
                page: 1
            },
            page:{},
        };
    },
    watch:{
        checkModel(){
    　　　　if(this.checkModel.length==this.list.length){
    　　　　　　this.checked=true;
    　　　　}else{
    　　　　　　this.checked=false;
    　　　　}
    　　},
        req:{
            handler(newVal, oldVal) {
                this.init();
            },
            immediate: true,
            deep: true
        },
    },
    created(){
        this.$emit('navIndex', 6);
    },
    methods:{
        checkAll(){
    　　　　if(this.checked){
    　　　　　　this.checkModel=[];
    　　　　}else{
    　　　　　　this.list.forEach((item)=>{
        　　　　　　if(this.checkModel.indexOf(item.id)==-1){
        　　　　　　　　this.checkModel.push(item.id)
        　　　　　　}
    　　　　　　})
    　　　　}
    　　},
        init(){
            messagesList(this.req).then(res => {
                if(res.code == 0){
                    this.list = res.data;
                     //分页部分
                    this.page.crr_page = this.req.page;
                    this.page.pages = res.pages; // 总页码
                    this.page.count = res.count; //每页显示
                    this.page.total = res.total; //总条数
                    this.page.hasPrevious = res.hasPrevious; //是否有上一页
                    this.page.hasNext = res.hasNext; //是否有下一页
                }
            }).catch(err => {
                console.log(err)
            })
        },

        del(id, index){
            this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                messagesDel(id).then(res => {
                    if(res.resp_code == 0){
                        this.msgSuccess(res.resp_msg);
                        this.list.splice(index, 1);
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                //this.msgInfo('已取消删除')
            });
        },

        delAll(){
            let data = {
                ids: this.checkModel
            }
            messagesDelAll(data).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                    this.init()
                }
            }).catch(err => {
                console.log(err)
            })
        },
        haveRead(){
            let data = {
                ids: this.checkModel
            }
            messagesIds(data).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account{
    float: right;
    width: 970px;
    height: 840px;
    padding: 30px 35px;
    background-color: #fff;
    color: #787878;
    position: relative;
}
.tab-nav{
    border-bottom: 1px solid #E8E8E8;
    span{
        cursor: pointer;
        display: inline-block;
        width: 65px;
        height: 28px;
        font-size: 16px;
        font-weight: 400;
        color: #787878;
        margin-right: 20px;
        &.active{
            color: #3EABC4;
            border-bottom: 2px solid #3EACC4;
        }
    }
}
.tab-content{
    margin-top: 28px;
    font-size: 14px;
    color: #787878;
    dl{
        dt{
            width: 900px;
            height: 50px;
            line-height: 50px;
            background: #F7F7F7;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                }
                &:nth-child(2){
                    width: 500px;
                }
                &:nth-child(3){
                    width: 180px;
                }
                &:nth-child(4){
                    text-align: center;
                    width: 100px;
                }
                &:nth-child(5){
                    text-align: center;
                    width: 80px;
                }
            }
        }
        dd{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #E8E8E8;
            overflow: hidden;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                    margin-top: 6px;
                }
                &:nth-child(2){
                    width: 500px;
                }
                &:nth-child(3){
                    width: 180px;
                }
                &:nth-child(4){
                    width: 100px;
                    text-align: center;
                }
                &:nth-child(5){
                    text-align: center;
                    width: 80px;
                }
            }

            &.no-data{
                span{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }

    .tool{
        margin-top: 45px;
        label{
            font-weight: 400;
            margin-right: 10px;
        }
        input{
            margin-bottom: -6px;
            margin-right: 5px;
        }
        button{
            width: 88px;
            height: 32px;
            background: #3EACC4;
            border-radius: 4px;
            outline: none;
            border: 0;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
            &:last-child{
                width: 88px;
                height: 32px;
                background: #E8F4F6;
                border: 1px solid #3EACC4;
                border-radius: 4px;
                color: #3EABC4;
            }
        }
    }
    >>>.el-pagination{
        // margin-top: 50px;
        // margin-bottom: 80px;
        text-align: center;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%);

        button{
            cursor: pointer;
            outline: none;
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            color: #777777;
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 400;
            &:disabled{
                color: #BBBBBB;
            }
        }

        .el-pager{
            .number{
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                font-weight: normal;
                width: 30px;
                height: 30px;
                color: #777777;
                &.active{
                    background: #3DABC4;
                    border-radius: 4px;
                    color: white;
                }
            }
        }

    }

    .pages{
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%);
        button{
            outline: none;
            border: 0;
        }
        .prev,.next{
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #BCBCBC;
            cursor: pointer;
        }
        .page{
            button{
                font-size: 14px;
                width: 30px;
                height: 30px;
                background: #3EACC4;
                border-radius: 4px;
                color: #FFFFFF;
                margin-left: 10px;
                margin-right: 10px;
            }
        }
    }
}
</style>